<template>
  <div class="partNum">
    <div class="nav">
      <el-breadcrumb separator="/" class="nav-con">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{products.partNumber}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="partNum-warp">
      <div class="partNum-infro">
        <div class="infro-left">
          <h1>{{products.partNumber}}</h1>
          <P>品牌：{{products.brandName}}</P>
          <p>{{products.productIntroduce}}</p>
        </div>
        <img class="infro-right" :src="products.image" alt=""/>
      </div>
      <div class="product">
        <div class="title">
          <i class="el-icon-set-up"> 产品参数</i>
          <p class="line"></p>
        </div>
        <el-divider></el-divider>
        <el-descriptions :column="3" class="parameter" :colon="false">
          <el-descriptions-item :label="item.propertyName" v-for="(item,index) in products.properties" :key="index"
            >{{item.text}}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <div class="product">
        <div class="title">
          <i class="el-icon-download"> 资料下载</i>
          <p class="line"></p>
        </div>
        <el-divider></el-divider>
        <!-- <el-descriptions
          direction="vertical"
          :column="3"
          border
          class="file-con"
        >
          <el-descriptions-item label="类型">数据手册</el-descriptions-item>
          <el-descriptions-item label="文档"
            >圣心-HC89F0531 数据手册</el-descriptions-item
          >
          <el-descriptions-item label="操作">
            <el-tag size="medium">下载</el-tag>
          </el-descriptions-item>
        </el-descriptions> -->
        <el-table
          :data="products.files"
          border
          class="file-box">
          <el-table-column
            prop="type"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="文档">
          </el-table-column>
          <el-table-column
            prop="url"
            label="操作">
            <template slot-scope="scope">
              <el-button size="medium" type="primary" @click="downLoad(scope.row.url)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="product">
        <div class="title">
          <i class="el-icon-sort"> 替换选型</i>
          <p class="line"></p>
        </div>
        <el-divider></el-divider>
        <p class="replace">替换选型： {{products.partNumber}}</p>
      </div>
    </div>
    <div class="selection-warp">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="val in tabs"
          :key="val.id"
          :name="val.id + ''"
        >
            <span slot="label"> {{val.name}} <span>{{val.num}}</span></span> 
            <el-table :data="tableData" style="width: 100%" height="500" :header-cell-style="{'background-color': '#f4f5f5','padding':'18px 0','font-size':'14px','text-align':'center'}">
                <el-table-column fixed prop="modelNum" width="300">
                    <template slot="header" slot-scope="scope">
                        <div class="header">
                            <p>共匹配90个</p>
                            <el-button type="info" @click="handlerContrast">对比</el-button>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.isChecked" @change="toggleCheck(scope.row)">HC89F0531HC89F0531</el-checkbox>
                        <el-button round>数据手册</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="degree" label="匹配度" width="140">
                    <template slot-scope="progressscope">
                        <el-progress class="progress" type="circle" :percentage="progressscope.row.degree" color="#5398b3"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="brand" label="品牌" width="140"> </el-table-column>
                <el-table-column prop="package" label="封装" width="140"> </el-table-column>
                <el-table-column prop="core" label="内核" width="140"> </el-table-column>
                <el-table-column prop="space" label="程序空间" width="140"> </el-table-column>
                <el-table-column prop="memory" label="内存" width="140"> </el-table-column>
                <el-table-column prop="voltage" label="工作电压" width="140"> </el-table-column>
                <el-table-column prop="eeprom" label="EEPROM(Btyles)" width="140"> </el-table-column>
                <el-table-column prop="frequency" label="最高主频" width="140"> </el-table-column>
                <el-table-column prop="max" label="最大I/Os" width="140"> </el-table-column>
                <el-table-column prop="degree" label="ADC" width="140"> </el-table-column>
                <el-table-column prop="brand" label="ADC通道数" width="140"> </el-table-column>
                <el-table-column prop="package" label="串口" width="140"> </el-table-column>
                <el-table-column prop="degree" label="串口通道数" width="100"> </el-table-column>
                <el-table-column prop="space" label="运放" width="100"> </el-table-column>
                <el-table-column prop="memory" label="比较器" width="100"> </el-table-column>
                <el-table-column prop="voltage" label="通用定时器" width="100"> </el-table-column>
                <el-table-column prop="eeprom" label="12C" width="100"> </el-table-column>
                <el-table-column prop="frequency" label="SPI" width="100"> </el-table-column>
                <el-table-column prop="max" label="USB" width="100"> </el-table-column>
                <el-table-column prop="brand" label="ADC通道数" width="100"> </el-table-column>
                <el-table-column prop="package" label="串口" width="100"> </el-table-column>
                <el-table-column prop="degree" label="串口通道数" width="100"> </el-table-column>
                <el-table-column prop="space" label="运放" width="100"> </el-table-column>
                <el-table-column prop="memory" label="比较器" width="100"> </el-table-column>
                <el-table-column prop="voltage" label="通用定时器" width="100"> </el-table-column>
                <el-table-column prop="eeprom" label="12C" width="100"> </el-table-column>
                <el-table-column prop="frequency" label="SPI" width="100"> </el-table-column>
                <el-table-column prop="max" label="USB" width="100"> </el-table-column>
            </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :direction="direction">
        <span>我来啦!</span>
      </el-drawer>
    </div>  
  </div>
</template>
<script>
import {queryProducts} from '@/api/index.js'
export default {
  name: "search",
  data() {
    return {
      partNum: "",
      products:[],
      tableData: [
        {
          id:11,
          isChecked:false,
          modelNum:'HEHHHHHHHHHH1233',
          degree:100,
          brand:'圣芯',
          package:'SOP20',
          core:'7583',
          space:'32KB',
          memory:'3KB',
          voltage:'2.0-5.5',
          eeprom:'2222',
          frequency:'',
          max:'18'
        },
        {
          id:21,
          isChecked:false,
          modelNum:'HEHHHHHHHHHH1233',
          degree:50,
          brand:'圣芯',
          package:'SOP20',
          core:'7583',
          space:'32KB',
          memory:'3KB',
          voltage:'2.0-5.5',
          eeprom:'2222',
          frequency:'',
          max:'18'
        },
        {
          id:31,
          isChecked:false,
          modelNum:'HEHHHHHHHHHH1233',
          degree:80,
          brand:'圣芯',
          package:'SOP20',
          core:'7583',
          space:'32KB',
          memory:'3KB',
          voltage:'2.0-5.5',
          eeprom:'2222',
          frequency:'',
          max:'18'
        },
      ],
      activeName: "1",
      partNumCheck:false,
      tabs: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "国内品牌",
          num: 20,
        },
        {
          id: 3,
          name: "国外品牌",
          num: 30,
        },
        {
          id: 4,
          name: "相同品牌",
          num: 10,
        },
      ],
      arrId:[],
      drawer: false,
      direction: 'btt',
      
    };
  },
  methods: {
    // tabs选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 多选框点击
    toggleCheck(row){
      // console.log(row)
      this.arrId.push(row.id);
      this.arrId = Array.from(new Set(this.arrId))
      this.arrId.map((id,i)=>{
        if(row.id == id && !row.isChecked){
          this.arrId.splice(i,1)
        }
      })
      console.log(this.arrId)
    },
    // 抽屉
    handlerContrast(){
      if(this.arrId.length >=2){
        this.drawer = true;
      }else{
        this.$message('请选择两个或两个以上进行对比')
        this.drawer = false;
      }
      
    },
    // 下载
    downLoad(url){
      window.open(url);
    }
  },
  created() {
    this.partNum = this.$route.query.partNum;
    let params = {
      'id':this.partNum,
    }
    queryProducts(params).then(res=>{
      if(res.code == 200){
       this.products = res.result;
       console.log(this.products,'数据');
      }
    })
  },
};
</script>
<style lang="less" scoped>
@import "./../../../assets/style/edit.css";
.partNum {
  width: 100%;
  // height: 100%;
  background: #fff;
  .nav {
    width: 100%;
    padding: 8px;
    background: #eeeeee;
    .nav-con {
      width: 60%;
      margin: auto;
    }
  }
  .file-box{
    width: 100%;
    margin-top: 20px;
  }
  .partNum-warp {
    width: 70%;
    margin: 20px auto 0;
    .partNum-infro{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .infro-right{
        width: 150px;
        height: 150px;
        display: block;
      }
    }
    h1 {
      font-size: 35px;
      font-weight: 500;
      margin: 30px 0 10px;
    }
    p {
      line-height: 32px;
      color: #787474;
    }
    .product {
      .title {
        position: relative;
      }
      margin: 25px 0 0;
      i {
        font-size: 17px;
        color: #121111;
      }
      .line {
        width: 77px;
        height: 3px;
        background: #f00;
        position: absolute;
        bottom: -18px;
        left: 13px;
      }
    }
    .file-con {
      margin-top: 10px;
    }
  }
  .el-divider--horizontal {
    margin: 18px 0 0;
  }
  .replace {
    font-size: 16px;
    color: #000;
    // font-weight: bold;
    margin: 10px 0;
  }
  .selection-warp {
    width: 100%;
    padding: 10px 20px;
    background: #fff;
  }
  ::v-deep .el-tabs__nav-scroll{
    width: 25%!important;
    margin: 0 auto!important;
    }
    .header{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .el-checkbox:last-of-type{
        display: flex;
        align-items: center;
    }
   
  
}
</style>